<!--
 * @Author       : zp
 * @Date         : 2021-07-03 19:35:15
 * @LastEditors  : ly
 * @LastEditTime : 2021-07-29 11:04:02
 * @Description  : 修改手机号
-->
<template>
  <a-form-model
    ref="dialogForm"
    :model="dialogForm"
    :rules="rules"
    layout="vertical"
  >
    <a-form-model-item label="手机号码" prop="cellPhone">
      <a-input placeholder="请输入新号码" v-model="dialogForm.cellPhone" />
    </a-form-model-item>
    <a-form-model-item label="验证码" prop="code" class="code-container">
      <a-input placeholder="验证码" :maxLength="6" v-model="dialogForm.code" />
      <a-button :disabled="disabled" @click="getCode">
        {{ timerHtml }}
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { validateRule, isPhone } from '@/utils/validate'
  // import { queryUserByID } from '@/services/auth'
  import { updateUser, sendSmsCode } from '@/services/access/user'
  export default {
    data() {
      return {
        timerHtml: '获取验证码',
        disabled: true,
        dialogForm: {
          cellPhone: '',
          code: undefined,
        },
        rules: {
          cellPhone: validateRule(true, 'isPhone', 'blur', '请输入手机号'),
          code: [
            { required: true, message: '请输入验证码' },
            {
              pattern: /^[0-9]*$/,
              message: '验证码为数字',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^\d{6,}$/,
              message: '验证码为6位',
              trigger: ['change', 'blur'],
            },
          ],
        },
      }
    },

    computed: {
      ...mapGetters('account', ['user']),
      mobile() {
        return this.dialogForm.cellPhone
      },
    },
    watch: {
      mobile(value) {
        if (isPhone(value)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
    },
    mounted() {
      // this.getUserInfo()
    },
    methods: {
      // getUserInfo() {
      //   const companyID = this.user.companyID
      //   const userID = this.user.subjectID
      //   queryUserByID({ companyID, userID }).then((res) => {
      //     this.dialogForm.cellPhone = res.data.user.cellPhone
      //   })
      // },
      getCode() {
        console.log(' this.user', this.user)
        sendSmsCode({
          userID: this.user.subjectID,
          phone: this.dialogForm.cellPhone,
        }).then((res) => {
          this.setTimerHtml()
          this.$message.success(res.data || '验证码已发送')
        })
      },
      //发送验证码
      setTimerHtml() {
        let timer_num = 60
        this.timerHtml = '重发验证(60)'
        this.disabled = true
        this.timeClock = setInterval(() => {
          timer_num--
          this.timerHtml = '重发验证(' + timer_num + ')'
          if (timer_num == 0) {
            clearInterval(this.timeClock)
            this.timerHtml = '获取验证码'
            this.disabled = false
          }
        }, 1000)
      },
      // rowData, visible
      onSubmit(rowData) {
        console.log('editPhone --- rowData', rowData)
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            const companyID = this.user.companyID
            const userID = this.user.subjectID
            const params = Object.assign({}, this.dialogForm, {
              companyID,
              userID,
            })
            updateUser(params).then((res) => {
              this.$message.success(res.msg || '修改成功')
              this.$emit('close-modal')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      resetForm() {
        this.$refs.dialogForm.resetFields()
        this.dialogForm = this.$options.data().dialogForm
        return false
      },
    },
  }
</script>
<style lang="less" scoped>
  .code-container {
    /deep/ .ant-form-item-children {
      display: flex;
      input {
        margin-right: 10px;
      }
    }
  }
</style>
